<template>
  <div>
    <el-row :gutter="10">
      <el-col :xs="4" :sm="4" :md="5" :lg="3" :xl="2">
        <el-card class="toolbar-pane">
          <div slot="header" class="clearfix">
            <div class="text-center">组件</div>
          </div>
          <el-col :xs="24" :sm="24" :md="12">
            <input-toolbar @add="addComponent"></input-toolbar>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12">
            <check-toolbar @add="addComponent"></check-toolbar>
          </el-col>
        </el-card>
      </el-col>
      <el-col :xs="14" :sm="14" :md="13" :lg="15" :xl="17">
        <el-card class="form-pane">
          <div slot="header" class="clearfix">
            <div>表单预览页面</div>
          </div>
          <el-form ref="form" label-width="80px">
            <div v-if="myForm.length === 0">
              <div class="no-data">在这里预览你构建的表单</div>
            </div>
            <draggable group="formComponent" class="preview-form" v-else>
              <transition-group type="transition">
                <div v-for="item in myForm" :key="item.id" :is="item.component"
                     :instanceId="item.id" @showProp="showPropPane" @remove="onRemove"></div>
              </transition-group>
            </draggable>
            <div class="text-center">
              <el-button type="primary">提交</el-button>
              <el-button type="default">取消</el-button>
            </div>
          </el-form>
        </el-card>
      </el-col>
      <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="5">
        <el-card class="prop-pane">
          <div slot="header" class="clearfix">
            <span>属性面板</span>
          </div>
          <component :is="propPane" :instanceId="propInstanceId"></component>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import draggable from 'vuedraggable'
import InputToolbar from './FormDesigner/FormInput/InputToolbar'
import InputForm from './FormDesigner/FormInput/InputForm'
import CheckForm from './FormDesigner/FormCheck/CheckForm'
import CheckToolbar from './FormDesigner/FormCheck/CheckToolbar'
import InputProp from './FormDesigner/FormInput/InputPorp'
import CheckProp from './FormDesigner/FormCheck/CheckPorp'

export default {
  name: 'HelloWorld',
  components: {CheckProp, InputProp, InputForm, InputToolbar, CheckForm, CheckToolbar, draggable},
  data () {
    return {
      showRemoveIcon: false,
      propInstanceId: null,
      propPane: null,
      form: null,
      myForm: []
    }
  },
  created () {
  },
  mounted () {
    // this.myForm.push({
    //   component: 'CheckForm',
    //   id: 'a'
    // })
  },
  methods: {
    showPropPane (c) {
      this.propInstanceId = c.instanceId
      this.propPane = c.propPane
    },
    addComponent (data) {
      this.myForm.push(data)
    },
    onRemove (instanceId) {
      let index = this.myForm.findIndex(item => {
        return item.id === instanceId
      })
      this.myForm.splice(index, 1)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.preview-form {
  min-height: 300px;
}

.no-data {
  display: flex;
  align-items: center;
  height: 450px;
  text-align: center;
}

.toolbar-pane {
  min-height: 600px;
}

.prop-pane {
  min-height: 600px;
}

.form-pane {
  min-height: 600px;
}

.text-center {
  text-align: center;
}
</style>
